<template>
  <view class="app-page safe-area">
    <view class="mask"></view>
    <view class="signBoard">
      <l-signature
        ref="signatureRef"
        :landscape="setting.landscape"
        :penSize="setting.penSize"
        :penColor="setting.penColor"
        :minLineWidth="minLineWidth"
        :maxLineWidth="setting.maxLineWidth"
        width="80vw"
        height="70vh"
        :backgroundColor="setting.backgroundColor"
        :disableScroll="setting.disableScroll"
      ></l-signature>
      <view class="sign-tools">
        <button class="button" @click="onClick('clear')">
          <text>清空</text>
        </button>
        <button class="button" @click="onClick('undo')">
          <text>撤消</text>
        </button>
        <button class="button" @click="onClick('save')">保存</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
      penColor: "red",
      url: "",
      openSmooth: true,
      setting: {
        type: "2d",
        landscape: true,
        penSize: 6,
        penColor: "black",
        minLineWidth: 2,
        maxLineWidth: 6,
        backgroundColor: "",
        disableScroll: true,
      },
    };
  },
  mounted() {},
  methods: {
    onClick(type) {
      if (type == "openSmooth") {
        this.openSmooth = !this.openSmooth;
        return;
      }
      if (type == "save") {
        this.$refs.signatureRef.canvasToTempFilePath({
          success: (res) => {
            // 是否为空画板 无签名
            console.log(res.isEmpty);
            // 生成图片的临时路径
            // H5 生成的是base64
            this.url = res.tempFilePath;
          },
        });
        return;
      }
      if (this.$refs.signatureRef) this.$refs.signatureRef[type]();
    },
  },
};
</script>

<style scoped lang="scss">
.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.signBoard {
  width: 80vw;
  height: 70vh;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 20rpx;
  border: 1rpx dashed #000;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: linear-in 1 0.5s forwards ease-in-out;
  z-index: 101;
  .sign-tools {
    width: 10vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: red;
    position: absolute;
    left: 0;
    top: 0;
    .button {
      width: 100%;
      height: 200rpx;
      text {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: rotate(90deg);
      }
    }
  }
}
@keyframes linear-in {
  0% {
    left: 120%;
    opacity: 0.2;
  }
  100% {
    left: 50%;

    opacity: 1;
  }
}
</style>
